<template>
    <div>
        <el-card shadow="always" :body-style="{ padding: '20px' }" style="width: 80vw; margin: auto; margin-top: 50px;">
            <div style="margin-top: 20px;">
                <div style="width: 30%; float: left;">
                    操作时间：<el-date-picker v-model="value2" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
                        format="YYYY-MM-DD" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" style="width: 70%;" />
                </div>
                <div style="width: 30%;float: left;margin-left: 20px;">
                    <el-input v-model="searchparam.searchKey" style="padding-right: 0%;" placeholder="Please input">
                        <template #suffix>
                            <el-button type="primary" size="default" @click="test">增加测试数据</el-button>
                        </template>
                    </el-input>
                </div>
            </div>
            <div style="margin-top: 100px; ">
                <!-- 进销存统计 -->
                <el-table  :data="IAOtableData" border style="width: 100%">
                    <!-- 表头 -->
                    <el-table-column type="index"></el-table-column>
                    <el-table-column prop="药品编码" label="药品编码"></el-table-column>
                    <el-table-column prop="药品名称" label="药品名称"></el-table-column>
                    <el-table-column prop="规格" label="规格"></el-table-column>
                    <el-table-column prop="供应商" label="供应商"></el-table-column>
                    <el-table-column prop="生产厂商" label="生产厂商"></el-table-column>
                    <el-table-column prop="批号" label="批号"></el-table-column>
                    <!-- 期初库存 -->
                    <el-table-column label="期初库存">
                        <el-table-column prop="期初库存.采购价" label="采购价"></el-table-column>
                        <el-table-column prop="期初库存.数量" label="数量" width="60"></el-table-column>
                        <el-table-column prop="期初库存.采购金额" label="采购金额"></el-table-column>
                    </el-table-column>

                    <!-- 库存增加 -->
                    <el-table-column label="库存增加">
                        <el-table-column prop="库存增加.采购价" label="采购价"></el-table-column>
                        <el-table-column prop="库存增加.数量" label="数量" width="60"  ></el-table-column>
                        <el-table-column prop="库存增加.采购金额" label="采购金额"></el-table-column>
                    </el-table-column>

                    <!-- 库存减少 -->
                    <el-table-column label="库存减少">
                        <el-table-column prop="库存减少.采购价" label="采购价"></el-table-column>
                        <el-table-column prop="库存减少.数量" label="数量" width="60" ></el-table-column>
                        <el-table-column prop="库存减少.采购金额" label="采购金额"></el-table-column>
                    </el-table-column>

                    <!-- 期末库存 -->
                    <el-table-column label="期末库存">
                        <el-table-column prop="期末库存.采购价" label="采购价"></el-table-column>
                        <el-table-column prop="期末库存.数量" label="数量" width="60"></el-table-column>
                        <el-table-column prop="期末库存.采购金额" label="采购金额"></el-table-column>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { listJob } from "../../../../api/statistics/test";
//  
// 场景值 0出库统计， 1入库统计 2进销存统计 3调价统计
//  4药品销售明细 5处方药品排行 6零售药品排行
const scenario = ref(0)
//  搜索参数
const searchparam = ref({
    searchKey: ""
})
//进销存数据集合
const IAOtableData = reactive([
    { 
    药品编码: '合计', 
    期初库存: { 采购金额: '99' },
    库存增加: { 采购金额: '99' },
    库存减少: { 采购金额: '99' },
    期末库存: {  采购金额: '99' }
    },
    {
        药品编码: '100001',
        药品名称: '复方氯化钠注射液', 
        规格: '6g*10袋/盒', 
        供应商: '白云制药厂', 
        生产厂商: '昆明制药集团', 
        批号: '20191290030', 
        期初库存: { 采购价: '0.00', 
                    数量: '0盒', 
                    采购金额: '0.00' }, 
        库存增加: { 
            采购价: '20.00', 
            数量: '40盒', 
            采购金额: '800.00' }, 
        库存减少: { 
            采购价: '-10.00', 
            数量: '20盒', 
            采购金额: '200.00' 
        }, 
        期末库存: { 
            采购价: '20.00', 
            数量: '20盒', 
            采购金额: '400.00' 
        } },

])

// 搜索参数提示字符
const scenariotimetxt = ref('入库时间')
const selecttxt = ref('入库类型')
// 时间绑定值
const value2 = ref('')
// 时间格式转换
const dsatefomat = (value, args) => {
    var dt = new Date(value);
    if (args == 'yyyy-M-d') {// yyyy-M-d
        let year = dt.getFullYear();
        let month = dt.getMonth() + 1;
        let date = dt.getDate();
        return `${year}-${month}-${date}`;
    } else if (args == 'yyyy-M-d H:m:s') {// yyyy-M-d H:m:s
        let year = dt.getFullYear();
        let month = dt.getMonth() + 1;
        let date = dt.getDate();
        let hour = dt.getHours();
        let minute = dt.getMinutes();
        let second = dt.getSeconds();
        return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
    } else if (args == 'yyyy-MM-dd') {// yyyy-MM-dd
        let year = dt.getFullYear();
        let month = (dt.getMonth() + 1).toString().padStart(2, '0');
        let date = dt.getDate().toString().padStart(2, '0');
        return `${year}-${month}-${date}`;
    } else {// yyyy-MM-dd HH:mm:ss
        let year = dt.getFullYear();
        let month = (dt.getMonth() + 1).toString().padStart(2, '0');
        let date = dt.getDate().toString().padStart(2, '0');
        let hour = dt.getHours().toString().padStart(2, '0');
        let minute = dt.getMinutes().toString().padStart(2, '0');
        let second = dt.getSeconds().toString().padStart(2, '0');
        return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
    }
}
const test = () => {
     listJob();
}
</script>

<style scoped>

</style>